<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../js/aliplayer-min.js"></script>
<!-- 引入阿里云播放器的 CSS 样式 -->
<link href="../css/aliplayer-min.css" rel="stylesheet">
<script src="../js/player.js" charset="utf-8"></script>

<link href="../css/plyr.css" rel="stylesheet">
<script src="../js/plyr.js" charset="utf-8"></script>
<title>视频播放器</title>
<style>
    .mainContainer {
        position: absolute;
        width: 98%;  
        display: flex;
        height: 98%; /* 设置高度为视窗高度 */
        overflow-y: hidden;
        }

    .leftContainer{
        display: flex;
        flex-direction: column; /* 垂直方向排列子元素 */
        flex: 3.3;
        margin-right: 30px;
        margin-left: 15px;
        

    }

    .summary-box {
        margin-right: 15px;

        flex: 2;
        padding-bottom: 10px;
    }

    #video-player {
        flex: 2.9;
        height:100% ;
        width: 100%;
        margin-bottom: 10px;
        
    }
    .chatContainer {
        flex: 2.1;
        height:100% ;
        width: 100%;
        border: 0px;

    }

    
    /* 圆点样式 */
    .marker {
        z-index: 99999;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 10px;
        height: 10px;
        background-color: rgb(23, 6, 6); /* 圆点颜色 */
        border-radius: 50%; /* 圆点形状 */
        cursor: pointer;
    }

    .marker-title {
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(255, 250, 250, 0.9);
        color: #000000;
        border: 2px solid #373834;
        border-radius: 6px;
        font-family: SimSun, sans-serif;
        font-size: 12px;
        padding: 4px;
        width: 120px; /* 每行10个字符，每个字符宽度12px，加上间距 */
        word-wrap: break-word; /* 当内容过长时换行 */
        overflow: hidden; /* 如果标题太长，隐藏超出部分 */
    }
    
    




</style>

</head>
<body>
    <div class="mainContainer" id = "playermaincontainer">
        <div class = "leftContainer">
            <div id = "video-player"></div>
            <div class="chatContainer">
                <iframe src="./chat.html" style="width: 100%;height:100%; border: none;"></iframe>
            </div>
        </div>
        <div class="summary-box">
            <iframe src="./summarize.html" style="width: 100%;height:100%; border: none;"></iframe>
        </div>
    </div>


</body>
</html>

